<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<canvas id="mycanvas"  width="1500" height="1500"></canvas>

<script type="text/javascript">


    var c=document.getElementById("mycanvas");

    var ctx3=c.getContext("2d");

    ctx3.fillStyle="rgb(6,40,90)";

    ctx3.beginPath();

    ctx3.arc(250,250,250,0,Math.PI*2,true);

    ctx3.closePath();

    ctx3.fill();

    var ctx2=c.getContext("2d");

    ctx2.fillStyle="rgb(38,99,200)";

    ctx2.beginPath();

    ctx2.arc(250,300,200,0,Math.PI*2,true);

    ctx2.closePath();

    ctx2.fill();

    var ctx1=c.getContext("2d");

    ctx1.fillStyle="rgb(199,202,211)";

    ctx1.beginPath();

    ctx1.arc(250,350,150,0,Math.PI*2,true);

    ctx1.closePath();

    ctx1.fill();

    var ctx=c.getContext("2d");

    ctx.fillStyle="rgb(38,99,200)";

    ctx.beginPath();

    ctx.arc(250,400,100,0,Math.PI*2,true);

    ctx.closePath();

    ctx.fill();

</script>
</body>
</html>